<template>
  <div class="teacher-container">
    <div class="common-layout">
      <el-container class="layout-container">
        <!-- Sidebar Navigation -->
        <el-aside class="sidebar">
          <div class="sidebar-content">
            <h5 class="sidebar-title">Teacher Space</h5>
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                background-color="#f8fafc"
                active-text-color="#4f46e5"
            >
              <el-menu-item index="1" class="menu-item">
                <el-icon><setting /></el-icon>
                <span>My Courses</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>

        <!-- Main Content -->
        <el-main class="main-content">
          <!-- Header with Add Button -->
          <div class="page-header">
            <h2 class="page-title">My Courses</h2>
            <el-button
                type="primary"
                @click="showdialog()"
                class="add-course-btn"
            >
              <el-icon><Plus /></el-icon>
              Add Course
            </el-button>
          </div>

          <!-- Course List -->
          <div class="course-list">
            <div
                class="course-card"
                v-for="item in coursedata.list"
                :key="item.id"
            >
              <div class="course-info">
                <h3 class="course-name">{{item.name}}</h3>
<!--                <span class="course-year" v-if="item.marjor">-->
<!--                  {{ getYearLabel(item.marjor) }}-->
<!--                </span>-->
              </div>
              <div class="course-actions">
                <el-tooltip content="View Lessons" placement="top">
                  <el-button
                      type="success"
                      :icon="Link"
                      circle
                      @click="doLession(item.id,item.name)"
                      class="action-btn"
                  />
                </el-tooltip>
                <el-tooltip content="Edit Course" placement="top">
                  <el-button
                      type="primary"
                      :icon="Edit"
                      circle
                      @click="doEdit(item)"
                      class="action-btn"
                  />
                </el-tooltip>
                <el-tooltip content="Delete Course" placement="top">
                  <el-button
                      type="danger"
                      :icon="Delete"
                      circle
                      @click="doDelete(item.id)"
                      class="action-btn"
                  />
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>

    <!-- Course Dialog -->
    <el-dialog
        v-model="dialogFormVisible.visible"
        :title="onecourse.id ? 'Edit Course' : 'Add Course'"
        width="500px"
        class="course-dialog"
    >
      <el-form>
        <el-form-item label="Course Name">
          <el-input
              v-model="onecourse.id"
              type="hidden"
          />
          <el-input
              v-model="onecourse.name"
              autocomplete="off"
              placeholder="Enter course name"
              class="dialog-input"
          />
        </el-form-item>

        <el-form-item label="School Year">
          <el-select
              placeholder="Select school year"
              v-model="onecourse.marjor"
              class="dialog-select"
          >
            <el-option
                :key="item.dicinfovalue"
                :label="item.dicinfoname"
                :value="item.dicinfovalue"
                v-for="item in sydata.list"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="Live Status">
          <el-radio-group v-model="onecourse.islive" class="status-radio">
            <el-radio :value="0" label="Not Live" />
            <el-radio :value="1" label="Live" />
          </el-radio-group>
        </el-form-item> -->

        <el-form-item label="Course Image">
          <el-upload
              ref="upload"
              class="upload-demo"
              action=""
              :limit="1"
              :on-change="handleChange"
              :auto-upload="false"
          >
            <template #trigger>
              <el-button type="primary" class="upload-btn">
                <el-icon><Upload /></el-icon>
                Select Image
              </el-button>
            </template>
          </el-upload>
          <div class="image-preview" v-if="onecourse.showimgurl">
            <img :src="onecourse.showimgurl" alt="Course preview"/>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button
              @click="dialogFormVisible.visible = false"
              class="cancel-btn"
          >
            Cancel
          </el-button>
          <el-button
              type="primary"
              @click="doSubmit()"
              class="confirm-btn"
          >
            {{ onecourse.id ? 'Update' : 'Create' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// Import statements remain the same
import { Upload } from '@element-plus/icons-vue'

// Add this function to get year label
function getYearLabel(value) {
  const year = sydata.list.find(item => item.dicinfovalue === value)
  return year ? year.dicinfoname : ''
}

//import TopHeader from '../../components/TopHeader.vue' // 引用Header组件
//import TopBottom from '../../components/TopBottom.vue' // 引用Header组件

import {
  Link,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { reactive,ref,onMounted} from 'vue'
import { getMyCourseList,deleteCourse,uploadImage,getSchoolYear,saveCourse } from '../../api/course.ts'
import { useRouter,useRoute} from 'vue-router'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'


const env = import.meta.env
const serverurl:string = env['VITE_APP_BASE_API']
const upload = ref<UploadInstance>()
const dialogFormVisible =reactive({
  visible:false
})
const formLabelWidth = '140px'
const currentRoute = useRouter()
//单门课程，增加和编辑使用
const onecourse = reactive({
  id:null,
  name:'',
  imgurl:'',
  showimgurl:'',
  marjor:null,
  islive:0
})
//课程列表
const coursedata = reactive({
  list:[]
})
//学年列表
const sydata = reactive({
  list:[]
})

onMounted(() => {
  loaddata();
})

function loaddata()
{
  getMyCourseList().then((res) => {
    if (res.code == 200)
    {
      coursedata.list = res.data;
    }
  })
  getSchoolYear().then((res) => {
    if (res.code == 200)
    {
      sydata.list = res.data;
    }
  })
}
function showdialog()
{
  dialogFormVisible.visible = true
  onecourse.id=null
  onecourse.name=''
  onecourse.imgurl=''
  onecourse.showimgurl=''
  onecourse.marjor=null
  onecourse.islive=0
}
function doEdit(item)
{
  dialogFormVisible.visible = true
  onecourse.id=item.id
  onecourse.name=item.name
  onecourse.imgurl=item.imgurl
  onecourse.showimgurl=serverurl + item.imgurl
  onecourse.marjor=''+item.marjor
  onecourse.islive=item.islive
}
function doDelete(id)
{
  deleteCourse({"id":id}).then((res) => {
    if (res.code == 200)
    {
      //更新下视图数据
      loaddata();
    }
  })
}
function doLession(id,name)
{
  currentRoute.push('/lession?courseid='+id+"&name="+name)
}
function doSubmit()
{
  dialogFormVisible.visible = false
  saveCourse(onecourse).then((res) => {
    if (res.code == 200)
    {
      //更新下视图数据
      loaddata();
    }
  })
}
function handleChange(file, fileList){
  //upload.value!.clearFiles()
  const file2 = file.raw as UploadRawFile
  // file.uid = genFileId()
  // upload.value!.handleStart(file)
  const param = new FormData();
  let fileType = file2.type
  fileType = fileType.substr(fileType.lastIndexOf('/') + 1)
  const imgName = new Date().getTime();
  param.append("file", file2, imgName + "." + fileType)
  param.append("targetpath", '/courseimg')

  uploadImage(param).then((res) => {
    if (res.code == 200)
    {
      onecourse.imgurl = res.data.filepath
      onecourse.showimgurl = serverurl + res.data.filepath
    }
  })
  upload.value!.clearFiles()
}

</script>

<style lang="less" scoped>
.teacher-container {
  height: 100vh;
  background-color: #f8fafc;
}

.layout-container {
  height: 100%;
}

.sidebar {
  width: 220px !important;
  background-color: #f8fafc;
  border-right: 1px solid #e2e8f0;

  .sidebar-content {
    padding: 20px 0;

    .sidebar-title {
      color: #64748b;
      font-size: 16px;
      font-weight: 600;
      padding: 0 20px 15px;
      margin: 0;
      border-bottom: 1px solid #e2e8f0;
    }
  }

  .menu-item {
    margin: 5px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
      background-color: #eef2ff !important;
      color: #4f46e5 !important;
    }

    &.is-active {
      background-color: #eef2ff !important;
      color: #4f46e5 !important;
      font-weight: 500;
    }
  }
}

.main-content {
  padding: 30px !important;
  background-color: white;
  border-radius: 12px 0 0 0;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;

  .page-title {
    color: #1e293b;
    font-size: 24px;
    margin: 0;
  }

  .add-course-btn1 {
    background-color: #4f46e5;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
    transition: all 0.3s ease;

    &:hover {
      background-color: #4338ca;
      transform: translateY(-2px);
    }

    .el-icon {
      margin-right: 8px;
    }
  }
}

.course-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.course-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid #f1f5f9;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #e0e7ff;
  }

  .course-info {
    .course-name {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 5px 0;
    }

    .course-year {
      font-size: 13px;
      color: #64748b;
      background-color: #f1f5f9;
      padding: 3px 8px;
      border-radius: 4px;
    }
  }

  .course-actions {
    display: flex;
    gap: 10px;

    .action-btn {
      transition: all 0.2s ease;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

.course-dialog1 {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    border-bottom: 1px solid #f1f5f9;
    padding: 20px;
    margin-right: 0;

    .el-dialog__title {
      font-weight: 600;
      color: #1e293b;
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  //.dialog-input,
  .dialog-select {
    width: 100%;

    :deep(.el-input__inner) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      height: 40px;

      &:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.2);
      }
    }
  }

  .status-radio {
    :deep(.el-radio__inner) {
      border-color: #cbd5e1;
    }

    :deep(.el-radio__input.is-checked .el-radio__inner) {
      background-color: #4f46e5;
      border-color: #4f46e5;
    }

    :deep(.el-radio__label) {
      color: #475569;
    }
  }

  .upload-btn {
    background-color: #f1f5f9;
    border: none;
    color: #4f46e5;
    border-radius: 8px;

    &:hover {
      background-color: #e0e7ff;
    }

    .el-icon {
      margin-right: 8px;
    }
  }

  .image-preview {
    margin-top: 15px;

    img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    .cancel-btn {
      border-radius: 8px;
      border: 1px solid #e2e8f0;

      &:hover {
        color: #4f46e5;
        border-color: #c7d2fe;
      }
    }

    .confirm-btn {
      background-color: #4f46e5;
      border: none;
      border-radius: 8px;

      &:hover {
        background-color: #4338ca;
      }
    }
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 100% !important;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .main-content {
    padding: 20px !important;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .course-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;

    .course-actions {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .course-dialog {
    width: 90% !important;
  }
}
</style>
